const { useState, useEffect } = React;
const { Button, Space, Input, Tag, List, Typography, message, Modal, Form } = antd;


const PromptForm = ({ visible, onCancel, onSubmit, initialValues, prompts }) => {
  const [form] = Form.useForm();
  const varTypes = ['input', 'radio', 'switch', 'checkbox'];

  const [doc, setDoc] = useState('');

  useEffect(() => {
    form.resetFields();
    if (initialValues) {
      form.setFieldsValue(initialValues);

      setDoc(initialValues.content)
      if (window.editor){
        editor.setValue(initialValues.content)
      }
      
    }
  }, [initialValues]);

  const updateDoc = (doc)=>{
    prn('updateDoc', doc)
    form.setFieldsValue({content: doc});
    setDoc(doc)
  }

  const doCopy = () => {
    prn('doCopy', doc)
    
    $.copyToClipboard(doc)
  }

  const doSave = async () => {
    let formValues = await form.validateFields()

    prn(formValues)
    onSubmit(formValues)
  }

  return (
    <Modal
      open={visible}
      width={1200}
      title={initialValues ? "Edit Prompt" : "New Prompt"}
      onCancel={onCancel}
      onOk={() => form.submit()}
    >



      <Form form={form} layout="vertical" onFinish={onSubmit}>
        <Form.Item name="name" label="Name" rules={[{ required: true }]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="content" label="content" rules={[{ required: true }]}
          style={{ display: 'none' }}
        >
          <Input />
        </Form.Item>

      <Form.Item style={{ textAlign: 'right' }}>
        <Space>
          <Button type='link' onClick={() => doCopy()}>Copy</Button>
          <Button type='link' onClick={() => doSave()}>Save</Button>
        </Space>
      </Form.Item>

       <MonacoEditor 
        init_doc={initialValues?initialValues.content:''}
        updateDoc={updateDoc}
       />


        <Form.Item name="vars" label="Variables">
          <Form.List name="vars">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, ...restField }) => (
                  <Space key={key} style={{ display: 'flex', marginBottom: 8 }}>
                    <Form.Item
                      {...restField}
                      name={[name, 'type']}
                      rules={[{ required: true }]}
                    >
                      <Select options={varTypes.map(t => ({ value: t, label: t }))} />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'name']}
                      rules={[{ required: true }]}
                    >
                      <Input placeholder="Variable name" />
                    </Form.Item>
                    <Button onClick={() => remove(name)}>Remove</Button>
                  </Space>
                ))}
                <Button onClick={() => add()}>Add Variable</Button>
              </>
            )}
          </Form.List>
        </Form.Item>
        <Form.Item name="tags" label="Tags">
          <Select mode="tags" placeholder="Add tags" 
                options={[...new Set(prompts.flatMap(p => p.tags))].map(tag => ({
                  value: tag,
                  label: tag
                }))}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};